import React,{Component} from 'react'
import { Avatar,Tag, Input, Tooltip,Divider } from 'antd';
import { PlusOutlined,IdcardOutlined,HomeOutlined } from '@ant-design/icons'
import './index.css'
import http from '../../service/http.js'
import { GetUserName } from '../../common/auth';
// import {getLoginToken} from '../../common/Auth.js'
export default class PersonIn extends Component{
  state = {
    tags: ['兴趣爱好', '听歌', '看电影'],
    inputVisible: false,
    inputValue: '',
    editInputIndex: -1,
    editInputValue: '',
    userOne:{}
  }
  componentDidMount(){
    http.getUser({username:GetUserName()}).then((res)=>{
      this.setState({userOne:res.data})
    })
  }
  // componentDidUpdate(){
  //   service.userOne({key:getLoginToken()}).then((res)=>{
  //     this.setState({userOne:res.data})
  //   })
  // }
  handleClose = removedTag => {
    const tags = this.state.tags.filter(tag => tag !== removedTag);
    console.log(tags);
    this.setState({ tags });
  };

  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  };

  handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
  };

  handleInputConfirm = () => {
    const { inputValue } = this.state;
    let { tags } = this.state;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue];
    }
    this.setState({
      tags,
      inputVisible: false,
      inputValue: '',
    });
  };

  handleEditInputChange = e => {
    this.setState({ editInputValue: e.target.value });
  };

  handleEditInputConfirm = () => {
    this.setState(({ tags, editInputIndex, editInputValue }) => {
      const newTags = [...tags];
      newTags[editInputIndex] = editInputValue;

      return {
        tags: newTags,
        editInputIndex: -1,
        editInputValue: '',
      };
    });
  };

  saveInputRef = input => {
    this.input = input;
  };

  saveEditInputRef = input => {
    this.editInput = input;
  };

  render() {
    const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
    return (
      <div style={{textAlign:'center'}}>
        <Avatar alt='' src={this.state.userOne.img} size={80}></Avatar>
        <h3 style={{textAlign:'center' ,marginTop:'20px'}}>{this.state.userOne.name}</h3>
        <p style={{textAlign:'center' ,marginTop:'10px'}}>海纳百川,有容乃大</p>
        <p style={{marginBottom:'0px',textAlign:'left',paddingLeft:'125px'}}><IdcardOutlined/>&nbsp;&nbsp;交互专家</p>
        <p style={{marginBottom:'0px',textAlign:'left',paddingLeft:'125px'}}><HomeOutlined />&nbsp;&nbsp;江西省九江市共青城市</p>
        <Divider plain>个人简介</Divider>
        <p style={{height:'80px',textAlign:'left'}}>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.state.userOne.individualResume}
        </p>
        <Divider plain>标签</Divider>
        {tags.map((tag, index) => {
          if (editInputIndex === index) {
            return (
              <Input
                ref={this.saveEditInputRef}
                key={tag}
                size="small"
                className="tag-input"
                value={editInputValue}
                onChange={this.handleEditInputChange}
                onBlur={this.handleEditInputConfirm}
                onPressEnter={this.handleEditInputConfirm}
              />
            );
          }

          const isLongTag = tag.length > 20;

          const tagElem = (
            <Tag
              className="edit-tag"
              key={tag}
              closable={index !== 0}
              onClose={() => this.handleClose(tag)}
            >
              <span
                onDoubleClick={e => {
                  if (index !== 0) {
                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                      this.editInput.focus();
                    });
                    e.preventDefault();
                  }
                }}
              >
                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
              </span>
            </Tag>
          );
          return isLongTag ? (
            <Tooltip title={tag} key={tag}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}
        {inputVisible && (
          <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            className="tag-input"
            value={inputValue}
            onChange={this.handleInputChange}
            onBlur={this.handleInputConfirm}
            onPressEnter={this.handleInputConfirm}
          />
        )}
        {!inputVisible && (
          <Tag className="site-tag-plus" onClick={this.showInput}>
            <PlusOutlined />添加
          </Tag>
        )}
      </div>
    );
  }
}

